<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>爱狗网</title>
	<link rel="stylesheet" type="text/css" href="/resources/css/nav.css">
	<style type="text/css">
    .banner{
        width: 1200px;
        height: 450px;
        margin: 0px auto;
        overflow: hidden;
    }

	.img-scroll{
        width: 935px;
        float: right;
        overflow: hidden;
	}

    #igs{
        width: 935px;
        height: 450px;
        position: relative;
    }
    .ig{
        position: absolute;
    }
    .btn{
        position: relative;
        height: 90px;
        width:  60px;
        background:#000;
        color: #fff;
        text-align: center;
        line-height: 90px;
        font-size: 40px;
        cursor: pointer;
    }
    #tabs{
        position: absolute;
        margin-top: -210px;
        margin-left: 420px;
    }
    .tab{width: 20px;
        height:20px;
        background-color: #5388e8;
        float: left;
        text-align: center;
        line-height: 30px;
        color: #fff;
        margin-right: 10px;
        border-radius: 100%;
        cursor: pointer;
    }
    .bg{
        background-color: #ff0000;
    }

    #btn1{
        opacity:0;
        top: -268px;
    }
    #btn2{
        left: 875px;
        opacity:0;
        top: -360px;
    }

    .left-box{
        float: left;
        width: 258px;
    }

    #tab-list{
        width: 258px;
        height:235px;
        float: left;

    }

    #ul1{
        height: 32px;
    }
    #ul1 li{
        display: inline-block;
        width: 86px;
        line-height: 30px;
        text-align: center;
        background-color: #FF4200;
        color: #fff;
        border-bottom:2px solid #FF4200;
    }
    #ul1 li:hover{
        cursor: pointer;
    }
    #ul1 li.active{
       background-color: #f2f2f2;
       color: #333;
       border-bottom:2px solid #f2f2f2;
    }

    #tab-list div{
        border: 1px solid #FF4200;
        border-top: none;
    }
    #tab-list div li{
        height: 29px;
        line-height: 29px;
        text-indent: 8px;
    }
    .lih{
        height: 203px;
    }
    .show{
        display: block;
        height: 203px;
    }
    .hide{
        display: none;
        height: 203px;
    }
    .lf-box{
        float: left;
    }

    .c-service li{
        display: inline-block;
        width: 110px;
        height: 100px;
        border: 1px solid #f2f2f2;
        text-align: center;
        margin-left: 10px;
        
        margin-top: 5px;
    }
    .c-service li img{
        padding-top: 10px;
    }
    .c-service li h2{
        padding-top: 5px;
    }
    #main{
        height: 1200px;
        margin: 10px auto;
        width: 1200px;
    }
    .tit{
        height: 30px;
        margin-top: 20px;
    }
    .tit h1{
        float: left;
        font-family: "微软雅黑";
        font-size: 20px;
        font-weight: bold;
    }
    .tit a{
        float: right;
        color: #ff7900;
        font-size: 12px;
        border: 1px solid #ff7900;
        padding: 5px 15px;
        border-radius: 20px;
    }
    .dogs{
        width: 1200px;
        margin: 10px auto 0;
        overflow: hidden;
    }
    .hot-left-dog{
        width: 1000px;
        height: 508px;
        float: left;
        margin: 0px 0 0 0;
        margin-top: 10px;
    }

    .hot-left-dog a{
        display: block;
        float: left;
        margin: 0;
    }
    .hot-right-dog{
        width: 200px;
        height: 508px;
        float: right;
        margin: 10px 0 0 0;
    }
    .hot-good{
          width: 1200px;
    }

	</style>
</head>
<body>
<!-- 页面导航 -->
<jsp:include page="head/site-topbar.jsp"/>
<jsp:include page="head/header.jsp"/>

<div class="banner">
    <div class="left-box">
        <!-- 选项卡切换 -->
        <div id="tab-list">
            <ul id="ul1">
                <li class="active">公告</li><li>新品</li><li>推荐</li>
            </ul>
            <div class="lih">
                <ul>
                    <li><a href="">欢迎来到狗狗网</a></li>
                    <li><a href="javascript:;">快快来选购吧！ </a></li>
                    <li><a href="javascript:;">如果您在使用中</a></li>
                    <li><a href="javascript:;">遇到问题</a></li>
                    <li><a href="javascript:;">欢迎联系客服</a></li>
                    <li><a href="javascript:;">我们将尽快解决</a></li>
                    <li><a href="javascript:;">！！！！！！</a></li>
                </ul>
            </div>
            <div class="hide">
                <ul>
                    <li><a href="/pet/1">韩国泰迪</a></li>
                    <li><a href="/pet/2">大狮头大毛腿藏獒</a></li>
                    <li><a href="/pet/8">Siberian Husky</a></li>
                    <li><a href="/pet/12">拉布拉多</a></li>
                    <li><a href="/petGood/5">狗粮 耐威克</a></li>
                    <li><a href="/petGood/6">皇家狗粮小型犬成犬粮2KG贵宾...</a></li>
                    <li><a href="/petGood/26">迷彩加厚棉衣</a></li>
                </ul>
            </div>
            <div class="hide">
                <ul>
                    <li><a href="/petGood/5">狗粮 耐威克</a></li>
                    <li><a href="/petGood/6">皇家狗粮小型犬成犬粮2KG贵宾...</a></li>
                    <li><a href="/petGood/26">迷彩加厚棉衣</a></li>
                    <li><a href="/pet/15">柯基犬</a></li>
                    <li><a href="/pet/1">韩国泰迪</a></li>
                    <li><a href="/pet/2">大狮头大毛腿藏獒</a></li>
                    <li><a href="/pet/12">拉布拉多</a></li>
                </ul>
            </div>
        </div>
        <div class="lb-box">
            <ul class="c-service">
                <li>
                    <a href="">
                        <img src="resources/images/lc_1.jpg" alt="lc_1" width="50" height="50">
                        <h2>提交需求</h2>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="/resources/images/lc_2.jpg" alt="lc_2" width="50" height="50">
                        <h2>联系客服</h2>
                    </a>
                </li>
                <li>
                   <a href="">
                        <img src="/resources/images/lc_3.jpg" alt="lc_3" width="50" height="50">
                        <h2>需求查找</h2>
                    </a>
                </li>
                <li>
                   <a href="">
                        <img src="/resources/images/lc_4.jpg" alt="lc_4" width="50" height="50">
                        <h2>服务保障</h2>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 轮播图 -->
    <div class="img-scroll">
        <div id="igs">
                <div class="ig"><img src="/resources/images/1.jpg" width="935" height="450"/></div>
                <div class="ig"><img src="/resources/images/2.jpg" width="935" height="450"/></div>
                <div class="ig"><img src="/resources/images/3.jpg" width="935" height="450"/></div>
                <div class="ig"><img src="/resources/images/4.jpg" width="935" height="450"/></div>
        </div>
        <div class="btn btn1" id="btn1">&lt;</div>
        <div class="btn btn2" id="btn2">&gt;</div>
        <div id="tabs">
            <div class="tab bg"></div>
            <div class="tab"></div>
            <div class="tab"></div>
            <div class="tab"></div>
        </div>
    </div>
</div>
<div id="main"> 
    <div class="tit">
        <h1>热门犬种</h1><a href="/pet">查看所有犬种</a>
    </div>
    <div class="dogs">
       <div class="hot-left-dog">
           <a href="/pet/choose?kindsId=1"><img src="/resources/images/dog_1.jpg" alt="dog_1"></a>
           <a href="/pet/choose?kindsId=2"><img src="/resources/images/dog_2.jpg" alt="dog_2"></a>
           <a href="/pet/choose?kindsId=3"><img src="/resources/images/dog_3.jpg" alt="dog_3"></a>
           <a href="/pet/choose?kindsId=5"><img src="/resources/images/dog_5.jpg" alt="dog_5"></a>
           <a href="/pet/choose?kindsId=6"><img src="/resources/images/dog_6.jpg" alt="dog_6"></a>
           <a href="/pet/choose?kindsId=7"><img src="/resources/images/dog_7.jpg" alt="dog_7"></a>
           <a href="/pet/choose?kindsId=8"><img src="/resources/images/dog_8.jpg" alt="dog_8"></a>
        </div>
    <div class="hot-right-dog">
        <a href="/pet/choose?kindsId=4"><img src="resources/images/dog_4.jpg" alt="dog_4" width="200" height="508"></a>
    </div>
    </div>
    <div class="tit">
        <h1>热门周边</h1><a href="/petGood">查看所有周边</a>
    </div>
    <div class="dogs">
       <div class="hot-good">
           <a href="/petGood/choose?kindsId=101"><img src="/resources/images/good_1.jpg" alt="good_1" width="195" height="195"></a>
           <a href="/petGood/choose?kindsId=102"><img src="/resources/images/good_2.jpg" alt="good_2" width="195" height="195"></a>
           <a href="/petGood/choose?kindsId=104"><img src="/resources/images/good_4.jpg" alt="good_4" width="195" height="195"></a>
           <a href="/petGood/choose?kindsId=103"><img src="/resources/images/good_3.jpg" alt="good_3" width="195" height="195"></a>
           <a href="/petGood/choose?kindsId=105"><img src="/resources/images/good_5.jpg" alt="good_5" width="195" height="195"></a>
           <a href="/petGood/choose?kindsId=106"><img src="/resources/images/good_6.jpg" alt="good_6" width="195" height="195"></a>
           <a href="/petGood/choose?kindsId=107"><img src="/resources/images/good_7.jpg" alt="good_7" width="195" height="195"></a>
           <a href="/petGood/choose?kindsId=105"><img src="/resources/images/good_8.jpg" alt="good_8" width="195" height="195"></a>
           <a href="/petGood/choose?kindsId=107"><img src="/resources/images/good_9.jpg" alt="good_9" width="195" height="195"></a>
           <a href="/petGood/choose?kindsId=104"><img src="/resources/images/good_10.jpg" alt="good_10" width="195" height="195"></a>
           <a href="/petGood/choose?kindsId=105"><img src="/resources/images/good_11.jpg" alt="good_11" width="195" height="195"></a>
           <a href="/petGood/choose?kindsId=104"><img src="/resources/images/good_12.jpg" alt="good_12" width="195" height="195"></a>
        </div>
    </div>
    

</div>

<jsp:include page="head/end.jsp"/>
<script src="resources/js/jquery-3.1.1.min.js"></script>
<script src="resources/js/myheader.js"></script>
<script type="text/javascript" src="resources/js/imgScroll.js"></script>
<script>

    window.onload = function(){

        //版本检查
        function getBrowserVersion(){
            var userAgent = navigator.userAgent.toLowerCase();
            if(userAgent.match(/msie ([\d.]+)/)!=null){//ie6--ie9
                uaMatch = userAgent.match(/msie ([\d.]+)/);
                return uaMatch[1];
             }else if(userAgent.match(/(trident)\/([\w.]+)/)){
                uaMatch = userAgent.match(/trident\/([\w.]+)/);
                switch (uaMatch[1]){
                    case "4.0": return "8" ;break;
                    case "5.0": return "9" ;break;
                    case "6.0": return "10";break;
                    case "7.0": return "11";break;
                }
            }return "undefined";
        }

        if(getBrowserVersion()<9){
            alert("您的浏览器版本过低，可能有部分内容无法正常显示，请及时更新");
        }

        //选项卡切换
        var oUl1 = document.getElementById("ul1");
        var aLi = oUl1.getElementsByTagName("li");
        var oDiv = document.getElementById("tab-list");
        var aDiv = oDiv.getElementsByTagName("div");
        for(var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;
            aLi[i].onmouseover = function() {
                for(var i = 0; i < aLi.length; i++) {
                    aLi[i].className = "";
                }
                this.className = "active";
                for(var j = 0; j < aDiv.length; j++) {
                    aDiv[j].className = "hide";
                }
                aDiv[this.index].className = "show";
            }
        }

        var myLi = $(".c-service")[0].getElementsByTagName("li");
        var index;
        for (var i = 0; i < myLi.length; i++) {
            myLi[i].index=i;
        }
        for (var i = 0; i < myLi.length; i++) {
            myLi[i].onmouseover = function(){
                myLi[this.index].style.border = "1px solid #FF4200";
            }
            myLi[i].onmouseout = function(){
                myLi[this.index].style.border = "1px solid #f2f2f2";
            }
        }
    }
</script>

</body>
</html>
